<template>
  <div class="payRecord">
    <div v-if="loading" class="loading"><van-loading class="load-icon" size="20px" type="spinner" /><span>拼命加载中...</span></div>
    <div class="order">
      <div class="title">
        <div class="icon">
          <img src="../../../../assets/images/icon/icon_order.png" alt="">
        </div>
        <span class="title-sn">订单号：{{ orderDetail.order_sn }}</span>
        <span v-if="orderDetail.is_button === 1" class="btn org-bg fr" @click="clickToPayOrder(orderDetail)">立即付款</span>
      </div>
      <div class="price">
        <div class="price-list large">
          <span class="label">订单金额：</span>
          <span class="txt font-colorRed">&yen;{{ orderDetail.total_fee }}</span>
        </div>
        <div class="price-list">
          <span class="label">待付款：</span>
          <span class="txt">&yen;{{ orderDetail.not_pay_fee }}</span>
        </div>
        <div class="price-list">
          <span class="label">已付款：</span>
          <span class="txt">&yen;{{ orderDetail.payed_fee }}</span>
        </div>
        <div v-if="orderDetail.wait_check_fee > 0" class="price-list">
          <span class="label">待付款确认：</span>
          <span class="txt">&yen;{{ orderDetail.wait_check_fee }}</span>
        </div>
        <div v-if="orderDetail.wait_refund_fee > 0" class="price-list">
          <span class="label">待退款确认：</span>
          <span class="txt">&yen;{{ orderDetail.wait_refund_fee }}</span>
        </div>
      </div>
    </div>
    <div class="record">
      <div class="titles">付款记录</div>
      <div v-for="item in payRecordList" :key="item.order_gathering_id">
        <div class="record-list">
          <div class="record-list-com">
            <div class="txt title">支付流水号：{{ item.gathering_sn }}</div>
            <div class="fr">
              <span>状态：</span>
              <span v-if="item.status == 0" class="status font-colorOrange">未审核</span>
              <span v-if="item.status == 1" class="status font-colorGreen">已审核</span>
              <span v-if="item.status == 2" class="status">作废</span>
            </div>
          </div>
          <div class="record-list-com">
            <div class="txt">
              <span>支付方式：</span>
              <span v-if="item.pay_type === 1">现金</span>
              <span v-if="item.pay_type === 2">银行转账</span>
              <span v-if="item.pay_type === 3">微信</span>
              <span v-if="item.pay_type === 4">支付宝</span>
              <span v-if="item.pay_type === 0">余额</span>
            </div>
            <div class="txt">支付金额：&yen;{{ item.payed_fee }}</div>
            <div class="txt">支付时间：{{ item.pay_time }}</div>
          </div>
        </div>
      </div>
      <div v-if="payRecordList.length == 0 && !loading">
        <div class="noData small">
          <div class="content">
            <img src="../../../../assets/images/noData/noDataRecord.png" alt="">
            <div class="text">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <payment-dialog ref="payDialog" :pay-type="payType"/>
  </div>
</template>

<script>
import { GetOrderPayLog } from '@/api/order'
import paymentDialog from '../../components/paymentDialog'
export default {
  name: 'Index',
  components: {
    paymentDialog
  },
  props: {
    orderDetail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      payType: undefined,
      loading: false,
      payRecordList: []
    }
  },
  created() {
    this.getOrderGatheringListFn()
  },
  methods: {
    // 获取收款记录列表
    getOrderGatheringListFn() {
      this.loading = true
      const order_id = this.$route.query.id
      GetOrderPayLog(order_id).then(res => {
        this.loading = false
        const data = res.data
        if (data.status_code === 200) {
          this.payRecordList = data.data.list.order_pay_list
        } else {
          this.payRecordList = []
        }
      })
    },
    // 点击付款
    clickToPayOrder(orderDetail) {
      this.$refs.payDialog.showDialog = true
      this.$refs.payDialog.formData.order_id = orderDetail.order_id
      this.$refs.payDialog.not_pay_fee = orderDetail.not_pay_fee
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .payRecord{
    .order{
      padding-left: pxCalc(20px);
      background: #fff;
      margin-bottom: pxCalc(5px);
      .title{
        padding: pxCalc(16px) pxCalc(20px) pxCalc(13px) 0;
        border-bottom: pxCalc(1px) solid #f5f5f5;
        font-size: pxCalc(14px);
        .icon{
          width: pxCalc(17px);
          display: inline-block;
          vertical-align: pxCalc(-4px);
          img{
            width: 100%;
          }
        }
        &-sn{
          color: #363b43;
        }
        .order-sn{
          color: #999999;
          font-size: pxCalc(13px);
        }
      }
      .price{
        font-size: 0;
        padding: pxCalc(13px) 0 pxCalc(14px);
        border-bottom: pxCalc(1px) solid #f5f5f5;
        &-list{
          font-size: pxCalc(12px);
          color: #363b43;
          width: 50%;
          display: inline-block;
          line-height: pxCalc(26px);
          &.large{
            font-size: pxCalc(14px);
          }
        }
      }
    }
    .record{
      padding-left: pxCalc(20px);
      background: #fff;
      .titles{
        padding: pxCalc(11px) pxCalc(20px) pxCalc(11px) 0;
        border-bottom: pxCalc(1px) solid #f5f5f5;
        font-size: pxCalc(14px);
      }
      .record-list{
        padding:pxCalc(10px) pxCalc(20px) pxCalc(10px) 0;
        border-bottom: pxCalc(1px) solid #f5f5f5;
        &-com{
          line-height: pxCalc(25px);
          color: #999999;
          .txt{
            font-size: pxCalc(13px);
            &.title{
              display: inline-block;
              color: #363b43;
              font-size: pxCalc(14px);
              display: inline-block;
            }
          }
        }
      }
    }
  }
</style>
